<template>
  <div class="outer">
    <div class="disflex align-cen">
      <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/b05f4aa7682f9fd6cce8152434b41d6.png" class="w20 h20">
      <span class="ml7 mr10">微信服务通知剩余推送次数</span>
      <span class="has-num">{{num}}</span>
    </div>
    <div class="disflex align-cen">
      <span class="mr23" @click="isShow=true">清空</span>
      <label for="add" class="h20">
        <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/8003a471a0f704a37c32b5385241042.png" class="w20 h20">
      </label>
      <form report-submit @submit="submitOrder" :report-submit="true">
          <button form-type="submit" id="add" style="display: none"></button>
      </form>
    </div>
    <template v-if="isShow">
      <DialogBox :dialog_title="'提示'" @btn_tap="nocard_btn_tap" dialog_ph="清空次数将无法再接收到微信服务通知，您确认要清空吗？"
                 type="hint2"
                 left="取消"
                 right="确定"
      ></DialogBox>
    </template>
  </div>
</template>

<script>
  import WXAJAX from '../utils/request'
  import DialogBox from '@/components/dialogBox' // 对话框

  export default {
    name: "AddNoticeNum",
    components: {DialogBox},
    data(){
      return {
        num: 0,
        isShow: false,
      }
    },
    mounted(){
      this.getTotalNum();
    },
    methods:{
      //获取推送总数
      getTotalNum(){
        WXAJAX.POST({
          ignore: true
        }, '', '/businessCard/formIdCount').then(res=>{
          this.num = res;
        });
      },
      nocard_btn_tap(str){
        if (str == 'save') {
          this.clearNum();
        }
        this.isShow = false;
      },
      clearNum(){
        WXAJAX.POST({
          ignore: true
        }, '', '/businessCard/delFormId').then(res=>{
          this.num = 0;
        });
      },
      submitOrder(e) {
        console.log(e);
        if ('the formId is a mock one' == e.mp.detail.formId) return;

        WXAJAX.POST({
          formId: e.mp.detail.formId,
          type: 2,
        }, '', '/customer/addFormId').then(res=>{
          this.num = res;
        });
      }
    }
  }
</script>

<style scoped>
  .outer{
    background: white;
    padding: 12px 15px;
    font-size: 14px;
    color:rgba(162,160,160,1);
    display: flex;
    justify-content: space-between;
  }
  .has-num{
    color:rgba(244,141,54,1);
  }
</style>
